<script setup>
import { ref,onMounted } from "vue"
import axios from 'axios'
import { queryAllApi,addApi,queryByIdApi,updateApi,deleteByIdApi } from "@/api/dept"
import { ElMessage,ElMessageBox } from 'element-plus'//引入对象不加{}.引入函数需要加{}
//定义部门数据数组
const empList=ref([])
//----------------------------------------------查询部门数据------------------------------------
async function research(){
  //测试地址，需要跟后端联调路径不能这样写
  //const result=await axios.get('https://apifoxmock.com/m1/3128855-1224313-default/depts')
  const result = await queryAllApi()//数据都被封装到函数中了
  //判断返回的result中code是0还是1，会自动类型转换，只有0,"",null,undefind是false，其余都是true
  if(result.code){
    empList.value=result.data
  }
}
//钩子函数，在页面加载出来的时候进行数据查询回显
onMounted(()=>{
  research()
})
//---------------------------------------------新增和修改部门------------------------------------------
//弹窗的题目标题，需要动态，为了复用
const formTitle=ref('')
//定义弹窗默认是关闭
const dialogFormVisible=ref(false)
//表单封装到dept中
const dept=ref({name:''})

//表单校验
//指定需要校验的表单，引用当前表单，表单引用对象
const deptFormRef = ref();
//定义表单校验规则rules属性
const rules = ref({
  name: [//参数是不是必须的required，message提示信息，trigger触发条件
    { required: true, message: '部门名称为必填项', trigger: 'blur' },
    { min: 2, max: 10, message: '部门名称必须得在2-10位之间', trigger: 'blur' }
  ]
})
//新增部门
function add(){
  //将
  if(deptFormRef.value){
    deptFormRef.value.resetFields();
  }
  //设置弹窗的开关，默认是false关闭
  dialogFormVisible.value=true
  //因为想让新增和编辑复用一个弹窗，所以弹窗标题不能定死
  //给标题赋值
  //重置表单校验信息 resetFields()
  formTitle.value='新增部门'
  //将之前输入过的部门名清空，这样在下次打开新增部门的时候不会有上次的数据留在原地
  dept.value={name:''}
}
//保存部门
async function save(){
  //保存之前先校验表单，通过校验后再发送请求
  //官网的使用方法
  if(!deptFormRef) return
  await deptFormRef.value.validate(async(valid,fields)=>{
    if(valid){
      //验证通过
      //判断是否有id，如果有，执行修改操作
      //result被多次使用，提升作用域
      let result
      if(dept.value.id){
        //修改部门
       result= await updateApi(dept.value)//传递部门对象
      }else{
        //新增部门
        //将输入的部门名通过addApi方法传递给后端
      result=await addApi(dept.value)
      }
      //判断服务器是否将数据保存成功
      if(result.code){
        //成功
        //弹出提示框
    ElMessage.success('保存成功')
    //关闭对话框
    dialogFormVisible.value=false
    //将数据查一遍
    research()
  }else{
    //失败，调用服务器全局异常服务器返回的信息
    ElMessage.error(result.msg)
  } 
    }else{
      ElMessage.error('表单校验不通过，请检查表单')
    }
  })
}

//点击编辑按钮
const edit =async(id)=>{
  const result=await queryByIdApi(id)
  if(result.code){
    dialogFormVisible.value=true
    dept.value=result.data
    formTitle.value='修改部门'
  }
}

//删除部门
function deleteById(id){
  ElMessageBox.confirm(
    '您确定要删除该部门吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
     const result=await deleteByIdApi(id)
     if(result.code){
      ElMessage.success('删除成功')
      research()
     }else{
      ElMessage.error(result.msg)
     }
    })
    .catch(() => {
      ElMessage.info('取消操作')
    })
}


</script>

<template>
  <!------------------------------------------------部门管理的页面原型---------------------------------------------------->
  <h1>部门管理</h1>
   <div id="header"><!--id选择器设计外边距 -->
    <!-- 点击新增部门按钮，需要调用add方法 -->
    <el-button type="primary" @click="add">+新增部门</el-button>
  </div>
  <el-table :data="empList" border style="width: 100%">
    <!-- type="index"让表格序号列顺序排列1234 -->
     <!-- 用align使数据居中 -->
    <el-table-column type="index" label="序号" width="200"  align="center"/>
    <el-table-column prop="name" label="部门名称" width="300"  align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间" width="300"  align="center"/>
    <el-table-column prop="address" label="操作"  align="center">
      <!-- 插槽引入按钮 -->
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- --------------------------------------------新增和修改部门的表单---------------------------------------------------- -->
  <el-dialog v-model="dialogFormVisible" :title="formTitle" width="500">
    <!-- 给rules属性传入校验规则，并将form-Item 的 prop 属性设置为需要验证的特殊键值 -->
    <!-- :rules="rules"将规则和表单绑定 -->
    <!-- ref="deptFormRef"关联表单 -->
    <el-form :model="dept" :rules="rules" ref="deptFormRef">
      <!-- prop="name"属性设置为需要验证的特殊键值 -->
       <el-form-item label="部门名称" label-width="100px" prop="name"><!--label-width：表单项名字所占用的宽度 -->
        <!-- 双向绑定，表单项要往dept.name的属性里绑定 -->
         <el-input v-model="dept.name" placeholder="请输入部门名称,长度为2-10位" /><!--提示信息 -->
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <!-- 关闭表单 -->
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 盒子模型，定义外边距 */
 #header{
  margin: 40px 0px;
 }
</style>
